<template>
	<div id="app">
		<div class="titleBar">
			<div class="title">
				<div class="logo"><img src="@/assets/logo.png" /></div>
				<div class="txt">web服务管理</div>
			</div>
			<div class="windowTool">
				<div @click="minisize"><i class="iconfont iconminisize"></i></div>
				<div v-if="!isMaxSize" @click="restore"><i class="iconfont iconrestore"></i></div>
				<div v-else @click="maxsize"><i class="iconfont iconmaxsize"></i></div>
				<div @click="close" class="close"><i class="iconfont iconclose"></i></div>
			</div>
		</div>
		<router-view />
	</div>
</template>

<script>
const { remote } = window.require('electron')
export default {
  data () {
    return { isMaxSize: true }
  },
  mounted () {},
  methods: {
    // 最小化
    minisize () {
      var win = remote.getCurrentWindow()
      win.minimize()
    },
    // 恢复
    restore () {
      remote.getCurrentWindow().restore()
      this.isMaxSize = !this.isMaxSize
    },
    // 最大化
    maxsize () {
      var win = remote.getCurrentWindow()
      win.maximize()
      this.isMaxSize = !this.isMaxSize
    },
    // 关闭
    close () {
      remote.getCurrentWindow().hide()
    }
  }
}
</script>

<style>
@import url(https://at.alicdn.com/t/font_1378132_s4e44adve5.css);

.titleBar {
	height: 38px;
	line-height: 36px;
	background: rgba(79, 192, 141, 0.5);
	display: flex;
	color: white;
	/* border-bottom: 1px solid #f5222d; */
}

.title {
	flex: 1;
	display: flex;
	-webkit-app-region: drag;
	/* color: white; */
}
.logo {
	padding-left: 8px;
	padding-right: 6px;
}
.logo img {
	width: 20px;
	height: 20px;
	margin-top: 7px;
}
.txt {
	text-align: left;
	flex: 1;
}
.close:hover {
	color: #fff;
	background-color: #ff4d4f;
}
.windowTool div {
	color: #888;
	height: 100%;
	width: 38px;
	display: inline-block;
	cursor: pointer;
}
i {
	font-size: 12px;
}
.windowTool div:hover {
	background: #ffccc7;
}

body {
	margin: 0;
	padding: 0;
	overflow: hidden;
	height: 100%;
}

#app {
	font-family: Avenir, Helvetica, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-align: center;
	color: #2c3e50;
	display: flex;
	flex-direction: column;
	border-radius: 5px;
}

#nav {
	padding: 30px;
}

#nav a {
	font-weight: bold;
	color: #2c3e50;
}

#nav a.router-link-exact-active {
	color: #42b983;
}
::-webkit-scrollbar {
	/*滚动条整体样式*/
	width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
	height: 1px;
}

::-webkit-scrollbar-thumb {
	/*滚动条里面小方块*/
	border-radius: 10px;
	-webkit-box-shadow: inset 0 0 5px rgba(144,147,153,.3);
	background: rgba(144,147,153,.3)
}

::-webkit-scrollbar-track {
	/*滚动条里面轨道*/
	-webkit-box-shadow: inset 0 0 5px rgba(144,147,153,.3);
	border-radius: 10px;
	background: #ededed;
}
</style>
